<template>
  <div class="form-container">
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/productHot' }">爆款/优选</el-breadcrumb-item>
        <el-breadcrumb-item>添加</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-content">
      <el-form ref="form" :model="form" label-width="126px">
        <el-form-item label="商品名称">
          <el-col :span="8">
            <el-input v-model="form.keyword" placeholder="商品名称关键字检索"></el-input>
          </el-col>
          <el-col :span="8" style="margin-left: 10px">
            <el-button type="primary" @click="search()">查询</el-button>
            <el-button type="default" @click="cancel()">返回</el-button>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="table-warp">
        <div class="table-bar">
          <el-dropdown @command="batchSetting">
            <el-button type="primary">
              批量操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item command="1">设为爆款</el-dropdown-item>
              <el-dropdown-item command="2">设为优选</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-table
          border
          empty-text="当前数据空空如也"
          ref="multipleTable"
          :data="products"
          tooltip-effect="dark"
          style="width: 100%"
          @select="selectedRow"
          @select-all="selectedAll"
        >
          <el-table-column
            type="selection" :selectable="selectStatus"
            width="55">
          </el-table-column>
          <el-table-column prop="product_id" label="序号" width="60"></el-table-column>
          <el-table-column prop="product_title" label="名称"></el-table-column>
          <el-table-column prop="store_name" label="商家"></el-table-column>
          <el-table-column prop="price" label="销售价"></el-table-column>
          <el-table-column prop="cost_price" label="成本价"></el-table-column>
          <el-table-column prop="primary_price" label="原价"></el-table-column>
          <el-table-column prop="volume" label="销量"></el-table-column>
          <el-table-column prop="num" label="库存"></el-table-column>
          <el-table-column prop="product_type" label="产品类型">
            <template slot-scope="scope">
              <p v-if="scope.row.product_type == 1">
                <el-tag type="danger">已设为爆款</el-tag>
              </p>
              <p v-else-if="scope.row.product_type == 2">
                <el-tag type="success">已设为优选</el-tag>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.product_type"
                         type="danger"
                         size="mini"
                         style="margin-right: 5px"
                         @click="settingHot(scope.$index, scope.row)">设为爆款
              </el-button>
              <el-button
                v-if="!scope.row.product_type"
                type="success"
                size="mini"
                style="margin-right: 5px"
                @click="settingGood(scope.$index, scope.row)">设为优选
              </el-button>

            </template>
          </el-table-column>
        </el-table>
        <div class="page-nav">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.form.page"
            :page-sizes="[10, 20, 30, 50,100]"
            :page-size="this.form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.form.total">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        form: {
          keyword: '',
          page: 1,
          pagesize: 10,
          total: 0,
        },
        selected: [],
        products: [],
        multipleSelection: [],
      }
    },
    mounted() {

    },
    methods: {
      selectStatus(row, rowInd) {
        if (row.product_type) {
          return false;
        }
        return true;
      },
      settingHot(ind, row) {
        this.batchAjax(1, row.product_id);
      },
      settingGood(ind, row) {
        this.batchAjax(2, row.product_id);
      },
      batchSetting(command) {
        if (this.multipleSelection.length < 1) {
          this.$message.error("请选择需要批量操作的商品");
          return;
        }
        console.log(this.multipleSelection);
        this.batchAjax(command, this.multipleSelection.join(','));
      },
      batchAjax(command, product_ids) {
        this.$http.post('/api/root/productHot/add', {product_type: command, product_ids: product_ids})
          .then(rest => {
            this.multipleSelection = [];
            if (rest.msg === 'ok') {
              this.$message.success("设置成功");
              this.search();
            } else {
              if (rest.data.selected && rest.data.selected.length > 0) {
                let html = '';
                rest.data.selected.map(function (item) {
                  html += '<p>商品：（' + item.product_id + '）' + item.product_name + '</p>已存在，不能重复设置';
                });
                this.$alert(html, '操作提示', {
                  dangerouslyUseHTMLString: true
                });
              }
            }

          })
      },
      selectedRow(selection, row) {
        this.multipleSelection = [];
        const _ths = this;
        selection.map(function (item) {
          _ths.multipleSelection.push(item.product_id);
        });
      },
      selectedAll(rows) {
        if (rows.length === 0) {
          this.multipleSelection = [];
        } else {
          const _ths = this;
          rows.map(function (item) {
            if (!_ths.multipleSelection.includes(item.product_id)) {
              _ths.multipleSelection.push(item.product_id);
            }
          })
        }
      },
      search() {
        this.$http.post('/api/root/productHot/search', {...this.form})
          .then(rest => {
            if (rest.data) {
              this.products = rest.data.products;
              this.form.total = rest.data.total;
            }
          })
      },
      cancel() {
        this.$router.push({name: 'productHot'})
      },
      handleSizeChange(val) {
        this.products = [];
        this.form.pagesize = val;
        this.search()
      },
      handleCurrentChange(val) {
        this.products = [];
        this.form.page = val;
        this.search();
      },

    }
  }
</script>
<style lang="less" scoped>
  @import "index.less";

  /deep/ .el-form-item__content {
    display: flex;
  }

  /deep/ .cell {
    display: flex;
  }
</style>